<template>
	<div class="table-search">
		<el-form :inline="true" :model="formData" class="demo-form-inline">
		  <el-form-item label="商品ID">
		    <el-input v-model="formData.name" placeholder="输入商品ID"></el-input>
		  </el-form-item>
		  <el-form-item label="商品名称">
		    <el-input v-model="formData.name" placeholder="输入商品名称"></el-input>
		  </el-form-item>
		  <el-form-item label="操作类型：">
		    <el-select v-model="formData.type" placeholder="全部">
		      <el-option label="订单关闭" value="close"></el-option>
		      <el-option label="订单取消" value="cancel"></el-option>
		      <el-option label="订单退货" value="back"></el-option>
		      <el-option label="添加商品" value="add"></el-option>
		      <el-option label="编辑商品" value="edit"></el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item label="创建时间">
		    <el-col style="width: 202px;">
		      <el-date-picker type="date" placeholder="开始时间" v-model="formData.startTime" style="width: 100%;"></el-date-picker>
		    </el-col>
		    <div class="time-line">—</div>
		    <el-col style="width: 202px;">
		      <el-date-picker type="date" placeholder="结束时间" v-model="formData.endTime" style="width: 100%;"></el-date-picker>
		    </el-col>
		  </el-form-item>
		  <el-button type="primary">查询</el-button>
		  <el-button type="warning">清空</el-button>
		</el-form>
	</div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      formData: {
        name: '',
        type: '',
        startTime: '',
        endTime: ''
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.table-search {
	padding: 30px 30px 10px 30px;
	font-size: 14px;
	color: #666;
	background-color: #F0F3FA;
	border-radius: 4px;

	.el-form-item {
		margin-bottom: 20px;
	}
}

#app {
	.table-search {
		.el-button {
			padding: 10px 25px;
	    	font-size: 14px;
		}
	}
}
</style>